<template>
  <div class="did-h">
    <el-card class="box-card">
      <div class="separator">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/tacticaChainlList' }">战术链列表</el-breadcrumb-item>
          <el-breadcrumb-item>战术链信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <div class="table">
      <!-- 表格 -->
      <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tacticalId" label="战术ID" width="150" align="center"></el-table-column>
        <el-table-column prop="name" label="战术名称" width="150" align="center"></el-table-column>
        <el-table-column prop="content" label="战术内容" width="350" align="center"></el-table-column>
        <el-table-column prop="time" label="创建时间" width="200" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" show-overflow-tooltip width="120" align="center"> </el-table-column>
        <el-table-column prop="detail" label="战术数据列表" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-copy-document" size="small" @click="goToipfsDownload(scope.row)" align="center">战术数据</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="personnel" label="战术数据上传" show-overflow-tooltip width="250" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-user-solid" size="small" @click="dataUpdate(scope.row)" align="center">战术数据上传</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="100" style="margin-top: 30px"></el-pagination>
    </div>
  </div>
</template>
    <script>
import NoData from '../../components/noData.vue';
export default {
  created() {
    this.tacticalChainDid = this.$route.query.tacticalChainDid;
    this.getTacticaList();
  },
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      tacticalChainDid: '',
      form: {
        did: '',
        textarea: '',
      },
      data: '',
      input3: '',
      tableData: [],
    };
  },
  mounted() {},
  methods: {
    goToipfsDownload(row) {
      this.$router.push({
        // 推送方法
        path: '/ipfsDownload', //导航的路径
        query: { tacticalChainDid: this.tacticalChainDid, tacticalId: row.tacticalId, tacticalName: row.name },
      });
    },
    dataUpdate(row) {
      this.$router.push({
        // 推送方法
        path: '/uploadChainData', //导航的路径
        query: { tacticalChainDid: this.tacticalChainDid, tacticalId: row.tacticalId, tacticalName: row.name },
      });
    },
    //获取战术列表
    async getTacticaList() {
      //TODD 按照用户DID和战术链列表查询对应的战术
      let formData = new FormData();
      formData.append('chainDid', this.tacticalChainDid);
      formData.append('userDid', window.localStorage.getItem('userDid'));
      let res = await this.$http.post(this.$api.tacticalChain.tacticalListBychainDid, formData);
      console.log(res);
      if (res.code == 0) {
        this.tableData = res.data;
        console.log(this.tableData);
      }
    },
  },
};
</script>
    <style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.separator {
  width: 100px;
}

.table {
  margin-trim: 10px;
  margin-top: 10px;
}
</style>
    